<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../../css/sm.min.css">
		<link rel="stylesheet" href=" ../../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<!-- css的使用-->
		<style type="text/css">
			#commitButton{
				
				color: orangered;
				
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- 社区入口 -->
				<h1 class="title">确认订单</h1>
			</header>



			<!-- 工具栏 -->
			<nav class="bar bar-tab"  id="commitArea">	
				<a class="tab-item external" href="#">
					共<input type="button"  id="allCount" style="border: none;" />件,
					合计<input type="button"  id="allPurchase" style="border: none;" />元
				</a>
				<!-- 提交的追加 -->
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
			
				 <div class="card">
					<div class="card-header">地址</div>
					<div class="card-content">
					  <div class="card-content-inner" id="addressDetail">
							
					  </div>
					</div>
					<div class="card-footer" id="change">
						
						
						
					</div>
				 </div>
				
				<div id="appendArea">
					
				</div>


				
				
			</div>
			
			
			
		</div> <!-- /vue -->	 
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/sm.js'></script>
		<script src='../../js/sm-extend.js'></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- VUE的使用 -->
		<script>
		        var app = new Vue({
		            el:"#app",
		            data:{
						arg:"",
		                array:[]
		            },
		            // 方法区
		            methods:{
						//跳转到搜索页面的方法
						 goSearch:function(){ 
						window.location="../shop_search.html"
						},
		            }
		        });
		</script>
		<!-- 初始化js -->
		<script type="text/javascript">
		//初始化方法
		$(function(){
			
			
			//var userId = "001"
			//如果更改地址状态存在
			var orderId = getUrlParam('orderId'); 
			//var orderId = "32a160b4-6d10-4cb9-9c96-240a244a4be6"
			//alert(orderId);
			//更换地址id
			var addrId = getUrlParam('addrId');
			
			//初始化订单
			initOrder(orderId);
			
			//alert(addrId);
			
			if(addrId==null){
				//初始化地址
				initDefaultAddress();
				//alert(addId)
			}else{
				//选择其他地址
				initOtherAddress(addrId)
			}

			//初始化更换地址按钮
			initchange(orderId);
			
			//初始化提交
			if(addrId==null){
				//初始化提交
				initDefaultCommit(orderId);
			}else{
				//选择其他地址的提交
				initOtherCommit(orderId,addrId);
			}
			
			
		});	
		</script>
		<!-- 方法js -->
		<script type="text/javascript">
			//oher的订单生成
			function payOtherOrder(orderId,addrId){
				//alert(addrId);
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/payOtherOrder",
				        dataType: 'json',
						data:{orderId: orderId,
						addrId:addrId
						},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
						alert(d.msg);
						
						location.href="../user/userCenter.html"
					}
				})
				
			}
			//ohter提交按钮
			function initOtherCommit(orderId,addrId){
				
			var commit = "<a id='commitButton' class='tab-item external' "+
			"onclick='javascript:payOtherOrder(\""+orderId+"\",\""+addrId+"\")'>"+
							"<span class='tab-label' id='commitOrder'>"+
								"提交订单"+
							"</span>"+
						"</a>";
								
			$("#commitArea").append(commit);	
				
			}
			// 初始化的订单生成
			function payDefaultOrder(orderId){
				//alert(orderId);
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/payDefaultOrder",
				        dataType: 'json',
						data:{orderId,orderId},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
						alert(d.msg);
						
						location.href="../user/userCenter.html"
					}
				})
			}
			//初始化提交订单
			function initDefaultCommit(orderId){
				//alert("11"); 
				
				var commit = "<a id='commitButton' class='tab-item external' "+
				"onclick='javascript:payDefaultOrder(\""+orderId+"\")'>"+
								"<span class='tab-label' id='commitOrder'>"+
									"提交订单"+
								"</span>"+
							"</a>";
									
				$("#commitArea").append(commit);
				
			}
			//初始化其他地址
			function initOtherAddress(addrId){
				
				$.get({
				        type: 'get',
				        url:serviceIP+"/shop/initOtherAddress",
				        dataType: 'json',
						data:{addrId: addrId},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
						
					var detail = ""+d.data.data[0].id+" "+d.data.data[0].phone+" <br>"+
								 ""+d.data.data2.country+" "+d.data.data2.province+" "+d.data.data2.city+" "+d.data.data2.detail+" <br>"+
								 "<font size='1' color='orangered'>收货不便时,可以使用网络服务点</font>";
					
					$("#addressDetail").append(detail);
					
						
					}
				})
				
			}
			//初始化跳转口
			function initchange(orderId){
				
				var changeLocation = "<a href='../user/addressChange.html?orderId="+orderId+"'>更换地址</a>"
				
				$("#change").append(changeLocation);
			}
			//初始化默认地址
			function initDefaultAddress(){
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/initDefaultAddress",
				        dataType: 'json',
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
							//alert(d.data.data[0].id)
							var detail = ""+d.data.data[0].id+" "+d.data.data[0].phone+" <br>"+
										 ""+d.data.data2.country+" "+d.data.data2.province+" "+d.data.data2.city+" "+d.data.data2.detail+" <br>"+
										 "<font size='1' color='orangered'>收货不便时,可以使用网络服务点</font>";
							
							$("#addressDetail").append(detail);
						}
				})
			}
			//初始化订单列表
			function initOrder(orderId){
				$.get({
						type: 'get',
						url: serviceIP+"/shop/initOrder",
						dataType: 'json',
						data:{orderId: orderId},
						headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
						success:function(d){
							//alert(d.data2.data2[0].nickname)
							//总件数
							var totalCount = 0;
							//总价
							var totalpurchase = 0;
							//alert(d.data2[0].nickname);
							for (var i = 0; i < d.data.data2.length; i++) {
								
								var items =   "<div class='card'>"+
												"<div class='card-header'>"+d.data2.data2[i].nickname+"</div>"+
												"<div class='card-content'>"+
												  "<div class='card-content-inner'>"+
													  "<img src='"+d.data2.data3[i].thumbnail+"' height='400px' width='300px' ><br>"+ //需要修改
													  "商品名字:"+d.data2.data[i].name+"<br>"+
													  "配送方式:邮递<br>"+
													  "运费险:0.2¥<br>"+
													  "店铺优惠:暂无<br>"+
													  "开具发票:本次不开具发票<br>"+
													 " 订单注备:"+
												  "</div>"+
												"</div>"+
												"<div class='card-footer'>共"+d.data.data2[i].count+"件"+
												"&nbsp;小计:&nbsp;"+d.data.data2[i].subtotal+"&nbsp;¥</div>"+
											  "</div>";
								
								$("#appendArea").append(items);
								//总件数的计算
								totalCount = totalCount + d.data.data2[i].count;
								//总成交额的计算
								totalpurchase = totalpurchase + d.data.data2[i].subtotal;
							}
							//追加总件数
							$("#allCount").val(totalCount);
							//追加总价
							$("#allPurchase").val(totalpurchase);
						}
					})	
				}
		</script>
		<!-- auxiliary js -->
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		<script type="text/javascript">
			$.init();
		</script>
	</body>
</html>
